<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
		<title>点击表格切换图片 </title>	
		
    </head>
    <script src="../第二天/move.yintao1.05.js"></script>
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
        .box{
            width:550px;
            height: 300px;
            border: 1px solid #005394;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .oUl{
        	width: 2750px;
        	height: 300px;
        	position: absolute;
        	
        }
        .oUl li{
        	float: left;
        	list-style: none;
        	width: 550px;
        	height: 300px;
        	font-size: 60px;
        	text-align: center;
        }
        .ulNav{
        	position: absolute;
        	right: 30px; bottom: 30px;
        	width: 100px; height: 15px;
        	list-style: none;
        }
        .ulNav li{
        	float: left;
        	width: 10px; height: 10px;
        	margin-left: 8px;
        	background: #808080;
        	border-radius: 50%;
        }
        .ulNav li.active{
        	background: blue;
        }
        .btnLeft{
        	width: 60px;
        	height: 60px;
        	position: absolute;
        	top: 120px; left: 30px;
        	background: url(btn.gif);
        }
        .btnRight{
        	width: 60px;
        	height: 60px;
        	position: absolute;
        	top: 120px; right: 30px;
        	background: url(btn.gif) 0 -60px;
        }
    </style>
    <script type="text/javascript">  
		window.onload = function(){
			var box = document.getElementsByClassName("box")[0];
			var btnRight = document.getElementsByClassName("btnRight")[0];
			var btnLeft = document.getElementsByClassName("btnLeft")[0];
			var oUL = document.getElementsByClassName("oUl")[0];
			var ulNav = document.getElementsByClassName("ulNav")[0];
			var navLis = ulNav.children;
			var index = 1;
			oUL.tab = setInterval(function(){
				//修改导航
				tabNav();
				//修改图片
				tabImg();
			},2000);
			
			//鼠标划入
			box.onmouseover = function(){
				clearInterval(oUL.tab);
			}
			
			//鼠标划出
			box.onmouseout = function(){
				oUL.tab = setInterval(function(){
					//修改导航
					tabNav();
					//修改图片
					tabImg();
				},2000);
			}
			
			//左按钮点击事件
			btnLeft.addEventListener("click",function(){
				if(index == 1){
					oUL.style.left = -550*4 + "px";
					index = 3;
					animate(oUL,{left:-550*3},{callback:function(){
						index++;
					}});
					tabNav();
				}
				else{
					//如果用 index -= 2  则每次执行完animate需要index++
					index -= 2;
					tabNav();
					animate(oUL,{left:-550*index},{callback:function(){						
						index++;
					}});					
				}
				
			});
			
			//右按钮点击事件
			btnRight.addEventListener("click",function(){
				if(index == 4){
					tabNav();
					animate(oUL,{left:-550*4},{callback:function(){
						oUL.style.left = 0;
						index = 1;
					}});
				}else{
					tabNav();
					animate(oUL,{left:-550*index},{callback:function(){
						index++;
					}});
				}
			});
			
			//修改导航
			function tabNav(){
				//遍历 navLis 将所有className去掉
				for (var i = 0; i < navLis.length; i++) {
					navLis[i].className = "";
				}
				//对导航下标做出判断 若为4则返回0 
				navLis[index == 4 ? 0 : index].className = "active";
			}
			
			//修改图片
			function tabImg(){
				animate(oUL,{left:-550*index},{callback:function(){
					if(index == 4){
						oUL.style.left = 0;
						index = 0;
					}
					index++;
				}});
			}
		}
    </script>
	<body>
        <div class="box">
        	<ul class = "oUl">
        		<li style="background: #006400;">A</li>
        		<li style="background: #0066FF;">B</li>
        		<li style="background: #008000;">C</li>
        		<li style="background: #00FF00;">D</li>
        		<li style="background: #006400;">A</li>
        	</ul>
        	<ul class="ulNav">
        		<li class = "active"></li>
        		<li></li>
        		<li></li>
        		<li></li>
        	</ul>
        	<div class="btnLeft"></div>
        	<div class="btnRight"></div>
        </div>
	</body>
</html>